<html><head><title>Checkbox.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Checkbox.js</h1><pre class="highlighted"><code><i>/**
 * @class Ext.form.Checkbox
 * @extends Ext.form.Field
 * Single checkbox field.  Can be used as a direct replacement <b>for</b> traditional checkbox fields.
 * @constructor
 * Creates a <b>new</b> Checkbox
 * @param {Object} config Configuration options
 */</i>
Ext.form.Checkbox = <b>function</b>(config){
    Ext.form.Checkbox.superclass.constructor.call(<b>this</b>, config);
    <b>this</b>.addEvents({
        <i>/**
         * @event check
         * Fires when the checkbox is checked or unchecked.
	     * @param {Ext.form.Checkbox} <b>this</b> This checkbox
	     * @param {Boolean} checked The <b>new</b> checked value
	     */</i>
        check : true
    });
};

Ext.extend(Ext.form.Checkbox, Ext.form.Field,  {
    <i>/**
     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
     */</i>
    focusClass : undefined,
    <i>/**
     * @cfg {String} fieldClass The <b>default</b> CSS class <b>for</b> the checkbox (defaults to &quot;x-form-field&quot;)
     */</i>
    fieldClass: &quot;x-form-field&quot;,
    <i>/**
     * @cfg {Boolean} checked True <b>if</b> the the checkbox should render already checked (defaults to false)
     */</i>
    checked: false,
    <i>/**
     * @cfg {String/Object} autoCreate A DomHelper element spec, or true <b>for</b> a <b>default</b> element spec (defaults to
     * {tag: &quot;input&quot;, type: &quot;checkbox&quot;, autocomplete: &quot;off&quot;})
     */</i>
    defaultAutoCreate : { tag: &quot;input&quot;, type: <em>'checkbox'</em>, autocomplete: &quot;off&quot;},
    <i>/**
     * @cfg {String} boxLabel The text that appears beside the checkbox
     */</i>
    boxLabel : undefined,
    <i>/**
     * @cfg {String} inputValue The value that should go into the generated input element's value attribute
     */</i>
    <i>//</i>
    onResize : <b>function</b>(){
        Ext.form.Checkbox.superclass.onResize.apply(<b>this</b>, arguments);
        <b>if</b>(!<b>this</b>.boxLabel){
            <b>this</b>.el.alignTo(<b>this</b>.wrap, <em>'c-c'</em>);
        }
    },

    initEvents : <b>function</b>(){
        Ext.form.Checkbox.superclass.initEvents.call(<b>this</b>);
        <b>this</b>.el.on(&quot;click&quot;, <b>this</b>.onClick,  <b>this</b>);
        <b>this</b>.el.on(&quot;change&quot;, <b>this</b>.onClick,  <b>this</b>);
    },


    getResizeEl : <b>function</b>(){
        <b>return</b> this.wrap;
    },

    getPositionEl : <b>function</b>(){
        <b>return</b> this.wrap;
    },

    <i>// private</i>
    onRender : <b>function</b>(ct, position){
        Ext.form.Checkbox.superclass.onRender.call(<b>this</b>, ct, position);
        <b>if</b>(this.inputValue !== undefined){
            <b>this</b>.el.dom.value = <b>this</b>.inputValue;
        }
        <b>this</b>.wrap = <b>this</b>.el.wrap({cls: &quot;x-form-check-wrap&quot;});
        <b>if</b>(this.boxLabel){
            <b>this</b>.wrap.createChild({tag: <em>'label'</em>, htmlFor: <b>this</b>.el.id, cls: <em>'x-form-cb-label'</em>, html: <b>this</b>.boxLabel});
        }
        <b>if</b>(this.checked){
            <b>this</b>.setValue(true);
        }<b>else</b>{
            <b>this</b>.checked = <b>this</b>.el.dom.checked;
        }
    },

    <i>// private</i>
    initValue : Ext.emptyFn,

    <i>/**
     * Returns the checked state of the checkbox.
     * @<b>return</b> {Boolean} True <b>if</b> checked, <b>else</b> false
     */</i>
    getValue : <b>function</b>(){
        <b>if</b>(this.rendered){
            <b>return</b> this.el.dom.checked;
        }
        <b>return</b> false;
    },

	<i>// private</i>
    onClick : <b>function</b>(){
        <b>if</b>(this.el.dom.checked != <b>this</b>.checked){
            <b>this</b>.setValue(<b>this</b>.el.dom.checked);
        }
    },

    <i>/**
     * Sets the checked state of the checkbox.
     * @param {Boolean/String} checked True, <em>'true'</em>, <em>'1'</em>, or <em>'on'</em> to check the checkbox, any other value will uncheck it.
     */</i>
    setValue : <b>function</b>(v){
        <b>this</b>.checked = (v === true || v === <em>'true'</em> || v == <em>'1'</em> || String(v).toLowerCase() == <em>'on'</em>);
        <b>if</b>(this.el &amp;&amp; <b>this</b>.el.dom){
            <b>this</b>.el.dom.checked = <b>this</b>.checked;
            <b>this</b>.el.dom.defaultChecked = <b>this</b>.checked;
        }
        <b>this</b>.fireEvent(&quot;check&quot;, <b>this</b>, <b>this</b>.checked);
    }
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
    </body></html>